<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
    * {
        margin: 0;
        padding: 0
    }

    li {
        list-style: none;
        cursor: pointer;
    }

    a {
        text-decoration: none;
        color: #fff;
        font-size: 16px;
    }

    .left>li {
        flex: 1;
        text-align: center;
    }

    nav {
        display: flex;
        width: 1280px;
        height: 80px;
        align-items: center;
        margin: auto;
    }

    .left {
        display: flex;
        width: 590px;
        margin: auto;
        flex: 5;
    }

    .right {
        display: flex;
        width: 160px;
        margin: auto;
        flex: 2;
        direction: rtl;
    }

    nav>img {
        display: flex;
        margin: auto;
    }

    .center {
        width: 1368px;
        height: 95px;
        background: red;
    }

    .center ul {
        width: 1220px;
        height: 95px;
        display: flex;
        margin: auto;
        align-items: center;
    }

    .center ul li {
        flex: 1;
        text-align: center;
    }

    .center li~li {
        border-left: 1px solid #fff;
    }

    .box {
        width: 1368px;
        height: 55px;
        border-bottom: 1px solid #000;
    }

    .box ul {
        width: 1235px;
        margin: auto;
        display: flex;
        align-items: center;
    }

    .box ul li {
        flex: 1;
        text-align: center;
    }

    h1 {
        text-align: center;
        line-height: 100px;
    }

    .box1 {
        width: 1235px;
        height: 310px;
        display: flex;
        margin: auto;
        justify-content: space-between;
    }

    .box2 {
        width: 1235px;
        height: 200px;
        margin: auto;
        display: flex;
    }

    .box2>div {
        display: flex;
        margin: auto;
    }

    .box2>div>div {
        justify-content: space-between;
        display: flex;
        flex: 1;
        background: aqua;
    }

    .box2>div>h3 {
        display: flex;
        flex: 1;

    }

    .box1>div {
        margin: auto;
    }

    .last {
        width: 1368px;
        height: 95px;
        margin: auto;
    }

    .last ul {
        width: 1220px;
        height: 45px;
        display: flex;
        margin: auto;
        justify-content: space-between;
    }

    .clast ul li {
        flex-grow:1;
        margin: auto;
    }
</style>

<body>
    <nav>
        <img src="./img/logo.png" width="42" height="42" alt="">
        <div class="left">
            <li>首页</li>
            <li>物流服务</li>
            <li>智慧科技</li>
            <li>服务支持</li>
            <li>可持续发展</li>
            <li>投资者关系</li>
            <li>关于我们</li>
        </div>
        <div class="right">
            <li><i></i></li>
            <li>语言</li>&emsp;
            <li>快速登录/注册</li>

        </div>
    </nav>
    <div style="width: 100%;height: 300px;background: aquamarine;"></div>
    <div class="center">
        <ul>
            <li><a href="">运单追踪</a></li>
            <li><a href="">我要寄件</a></li>
            <li><a href="">运费时效查询</a></li>
            <li><a href="">服务网点查询</a></li>
            <li><a href="">收寄范围查询</a></li>
        </ul>
    </div>
    <h1>
        物流服务介绍
    </h1>
    <div class="box">
        <ul>
            <li>快递服务</li>
            <li>快运服务</li>
            <li>冷云服务</li>
            <li>医药服务</li>
            <li>国际服务</li>
        </ul>
    </div>
    <div class="box1">
        <div>
            <div style="width: 590px;height: 210px;background: aqua;border-radius: 5%;"></div>
            <h3>
                顺丰特快
            </h3>
            <p>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务</p>
        </div>
        <div>
            <div style="width: 590px;height: 210px;background: aqua;border-radius: 5%;"></div>
            <h3>
                顺丰特快
            </h3>
            <p>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务</p>
        </div>
    </div>
    <h1>新闻咨询</h1>
    <div class="box2">
        <div>
            <div>1</div>
            <h4>
                国家电网与顺丰供应链深入物流信息化合作 加快战略落地现代智慧供应链管理体系
            </h4>
        </div>
        <div>
            <div>1</div>
            <h4>
                国家电网与顺丰供应链深入物流信息化合作 加快战略落地现代智慧供应链管理体系
            </h4>
        </div>
        <div>
            <div>1</div>
            <h4>
                国家电网与顺丰供应链深入物流信息化合作 加快战略落地现代智慧供应链管理体系
            </h4>
        </div>
        <div>
            <div>1</div>
            <h4>
                国家电网与顺丰供应链深入物流信息化合作 加快战略落地现代智慧供应链管理体系
            </h4>
        </div>
    </div>
    <div class="last">
        <ul>
            <li>顺丰特快</li>
            <li>顺丰国际</li>
            <li>顺丰通常寄送</li>
            <li>顺丰航空</li>
            <li>顺丰科技</li>
        </ul>
        <ul>
            <li>顺丰特快</li>
            <li>顺丰</li>
            <li>顺丰通常寄送</li>
            <li>顺丰航空</li>
            <li>顺丰科技</li>
        </ul>
    </div>
</body>
<script>

</script>

</html>